<script setup lang="ts">

import Card from "@/components/Card.vue";
import {useMessage} from "naive-ui";
import EventBox from "@/components/EventBox.vue";
import EventArg from "@/components/EventArg.vue";
import {ref} from "vue";

const message = useMessage();

function handle(str: string) {
  message.warning(str);
}

const count = ref<Number>(0);

function increment(step: Number): void {
  count.value = parseInt(count.value+'')+parseInt(step+'');
}

</script>

<template>
  <card title="组件事件">
    <p>父组件可以通过 v-on (缩写为 @) 来监听事件</p>
    <event-box @showMessage="handle"/>
  </card>
  <card title="组件事件-传参">
    <p>结果：{{ count }}</p>
    <event-arg @add="increment"/>
  </card>
</template>

<style scoped>

</style>